<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body{
  background: #eee;
}
.Breadcrumb {
  display: inline-block;
  margin:10px;
}
.Breadcrumb li {
  list-style: none;
  float: left;
}
.Breadcrumb li .a {
  text-decoration: none;
    background-color: #fff;
    color: #333;
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 10px 0 0px;
    position: relative;
    margin-right: 25px;
    font-size: 12px;
}
.Breadcrumb li:nth-child(even) .a {
  background-color: #fff;
}
.Breadcrumb li:nth-child(even) .a:before {
  border-color: #fff;
  border-left-color: transparent;
}
.Breadcrumb li:nth-child(even) .a:after {
  border-left-color: #fff;
}
.Breadcrumb li:first-child .a {
  padding-left: 20px;
  /* border-radius: 5px 0 0 5px; */
}
.Breadcrumb li:last-child .a {
  /* padding-right: 20px; */
  /* border-radius: 0 5px 5px 0; */
}
.Breadcrumb li a:before, .Breadcrumb li .a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #fff;
  border-width: 13px 10px;
  width: 0;
  height: 0;
}
.Breadcrumb li:first-child .a:before {
  border: none;
}
/* .Breadcrumb li:last-child a:after {
  border: none;
} */
.Breadcrumb li .a:before {
  left: -20px;
  border-left-color: transparent;
}
.Breadcrumb li .a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #fff;
}
/* .Breadcrumb li a:active {
  background-color: #16a085;
}
.Breadcrumb li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}
.Breadcrumb li a:active:after {
  border-left-color: #16a085;
} */
.Breadcrumb li.active .a{
  background:#74db9b;
} 
.Breadcrumb li.active .a:before{
  border-color:#74db9b;
    border-left-color: transparent;
}
.Breadcrumb li.active .a:after{
  border-left-color:#74db9b;
}
.Breadcrumb li.active .a{
  color:#fff;
}
</style>
</head>
<body>
<ul class="Breadcrumb">
  <li><a class="a">首页</a></li>
  <li class="active"><a class="a">蚂蚁部落一</a></li>
  <!-- <li><a href="#">蚂蚁部落一</a></li> -->
  <!-- <li><a href="#">蚂蚁部落二</a></li> -->

</ul>



<div class="stepCnt">
  <div class="active stepList">
    <span class="circular">1</span>
    <p class="title">初审</p>
    <p class="time">2020/9/12<span class="red">通过</span></p>
    <p class="cnt">这里是一些意见和建议</p>
  </div>
  <div class="active stepList">
    <span class="circular">2</span>
    <p class="title">初审</p>
    <p class="time">2020/9/12<span class="red">通过</span></p>
    <p class="cnt">这里是一些意见和建议</p>
  </div>
  <div class="stepList">
    <span class="circular">3</span>
    <p class="title">初审</p>
    <p class="time">2020/9/12<span class="red">通过</span></p>
    <p class="cnt">这里是一些意见和建议</p>
  </div>
  <div class="stepList">
    <span class="circular">4</span>
    <p class="title">初审</p>
    <p class="time">2020/9/12<span class="red">通过</span></p>
    <p class="cnt">这里是一些意见和建议</p>
  </div>

</div>

<style>
  .red{
    color:#6dc77a;
  }
  .grey{
    color:#777;
  }
  .stepCnt{
    display: flex;
    width:1280px;
    margin:0 auto;
  }
  .stepList{
    /* width: 16.66%; */
    flex: 1;
    position: relative;
    text-align: center;
  }
  .stepList::after{
    content: "";
    position: absolute;
    background: #777;
    width: calc(100% - 35px);
    top: 20px;
    height: 3px;
    display: inline-block;
    right: calc(50% + 17.5px);
  }
  .stepList.active::after{
    background: #7195f6;
  }
  .stepList:first-child::after{
    display: none;
  }

  .stepList .circular{
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #777;
    color:#777;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    position: relative;
  }
  .stepList.active .circular{
    border: 2px solid #7195f6;
    color:#7195f6;
  }
  .stepList>p{
    line-height: 25px;
  }
  .stepList>p.title{
    color:#777;
    font-size: 14px;
  }
  .stepList.active>p.title{
    color:#7195f6;
    font-size: 14px;
  }
  .stepList>p.time{
    color:#adadad;
    font-size: 12px;
  }
  .stepList>p.time span{
    margin-left: 5px;
  }
  .stepList>p.cnt{
    color:#adadad;
    font-size: 12px;
  }
  .stepList.active>p.time{
    color:#7195f6;
  }
  .stepList.active>p.cnt{
    color:#7195f6;
  }
</style>
</body>
</html>